fix: a11y low contrast in dark mode for code [AC-4348]#5777
fix: a11y low contrast in dark mode for code [AC-4348]#5777Stefan3002 wants to merge 1 commit intocanonical:mainfrom
Conversation
Demo
Jenkins 
demos.haus 
Stefan3002
changed the title
Stefan3002
changed the title
scss/_settings_colors.scss
Outdated
| $color-label-validated: #006b75; | ||
| $color-code-background: rgba($color-x-dark, 0.03); | ||
| $color-code-background-dark: rgba($color-x-light, 0.3); | ||
| $color-code-background-dark: rgba($color-x-light, 0.1); |
There was a problem hiding this comment.
While indeed the code text now has greater contrast against its own background, this also decreases the contrast between code and non-code text - it seems quite a bit harder to distinguish them.
Before
After
@juanruitina does this new background color look OK to you?
There was a problem hiding this comment.
It is more important to be able to read the text than to tell the semantics apart (and in this case, semantics are even reinforced by the monospace font). The contrast lower than 4.5 is not acceptable.
That said, @Stefan3002 it seems the case you are sharing in your screenshot is a corner case caused by the use of muted text. rgba($color-x-light, 0.15) would be sufficient to make the contrast greater than 4.5, see below. We could apply this to code tags only inside muted text, or for all code for the sake of simplicity and increased text contrast in all cases. Both options would be compliant.
Interestingly, this is not an issue in the light theme:
There was a problem hiding this comment.
Indeed, the problem is only present in dark mode 😄
Stefan3002
force-pushed
the
fix-a11y-low-contrast-code
branch
from
fd1412b to
996a28e
Compare
|
Hey all, sorry for the huge delay. I was in medical leave unfortunately. Could I get another review on this please? 😄 |
Stefan3002
force-pushed
the
fix-a11y-low-contrast-code
branch
from
996a28e to
86eb229
Compare
5 participants
Done
codeelement in dark mode.QA
Look at a confirmation modal that says: Next time press SHIFT, the contrast of the SHIFT text should be increased and pass a11y guidelines
Check if PR is ready for release
If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:
Feature 🎁,Breaking Change 💣,Bug 🐛,Documentation 📝,Maintenance 🔨.package.jsonshould be updated relative to the most recent release, following semver conventionFixes: AC-4348
Screenshots